<template>
    <view class='content'>
        <view class="tabs">
          <view
            class="item"
            @click="changeTab(item)"
            :class="{ check: checkTab === item.value }"
            v-for="item in tabs"
            :key="item.value"
          >
            {{ item.lable }}
          </view>
      </view>
        <view class="main">
          <view>
            <image v-show="checkTab === 1" :src="type1" mode="widthFix" />
            <image v-show="checkTab === 2" :src="type2" mode="widthFix" />
          </view>
          
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import {queryShopDetails} from '@/service/index';
import { onLoad,onShow } from '@dcloudio/uni-app';
const id = ref(null)
const checkTab = ref(1);
const list = ref([])
const type1 = ref('')
const type2 = ref('')
const tabs = [
  {
    lable: "图文指引",
    value: 1,
  },
  {
    lable: "开车指引",
    value: 2,
  },
];
const getData = ()=>{
    const params = {
         id:id.value
    }
    queryShopDetails(params).then(res=>{
        console.log(res);
        list.value = res.imgList;
        list.value.forEach(item=>{
          if(item.imgType === 2){
            type1.value = item.shopImgUrl
          }
          if(item.imgType === 3){
            type2.value = item.shopImgUrl
          }
        })
    })
}
const changeTab = (item) => {
  checkTab.value = item.value;
};
onLoad((options)=>{
 id.value = options.id;
  getData()
})

</script>
<style lang='less' scoped>
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
      .tabs {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88rpx;
    .item {
      position: relative;
      font-size: 28rpx;
      color: #333333;
      &.check {
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4rpx;
          background-color: #009a44;
          bottom: -4rpx;
          left: 0;
        }
      }
    }
  }
    .main {
        flex: 1;
        height: 100%;
        overflow-y: scroll;
        image{
          width: 100%;
        }
     
    }
}</style>